<template>
  <div class="studentInfo">
    <div class="left-box">
      <div class="user-top">
        <div>{{ userInfo.name }}</div>
        <div class="user-contact">{{ userInfo.contact }}</div>
        <div>
          <el-button type="text" icon="el-icon-edit" @click="showUserEdit(studentId)">编辑</el-button>
        </div>
      </div>
      <div class="user-content">
        <div class="user-content-item">
          <span>学员编号：</span>
          <span>{{ userInfo.studentNum }}</span>
        </div>

        <div class="user-content-item">
          <span>关联客户：</span>
          <span>{{ userInfo.client }}</span>
        </div>
        <div class="user-content-item">
          <span>生日：</span>
          <span>{{ userInfo.birthday }}</span>
        </div>
        <div class="user-content-item">
          <span>年龄：</span>
          <span>{{ userInfo.age }}</span>
        </div>
        <div class="user-content-item">
          <span>年级：</span>
          <span>{{ userInfo.grade }}</span>
        </div>
        <div class="user-content-item">
          <span>微信号：</span>
          <span>{{ userInfo.wechat }}</span>
        </div>
        <div class="user-content-item">
          <span>联系地址：</span>
          <span>{{ userInfo.territory.join(' ') + userInfo.address }}</span>
        </div>
        <div class="user-btn">
          <el-button type="primary" @click="goAppoint">预约上课</el-button>
        </div>
      </div>
    </div>
    <div class="right-box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="已报课程" name="first">
          <el-table
            :data="courseTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            style="width: 100%;"
          >
            <el-table-column prop="course" label="面授课" align="center" />
            <el-table-column prop="status" label="状态" align="center" />
            <el-table-column prop="validity" label="有效期" align="center" />
            <el-table-column prop="hour" label="课时" align="center" />
            <el-table-column prop="class" label="班级" align="center" />
          </el-table>
          <div class="block" style="margin:20px 0;">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              :total="courseTableData.length"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="课表" name="second">
          <div class="search-box">
            <div class="search-item">
              <span>时间</span>
              <el-date-picker
                v-model="keyTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
            <div class="search-item">
              <span>课程</span>
              <el-input v-model="keyCourse" clearable style="width:200px;" placeholder="请输入课程名称" />
              <el-button type="primary" icon="el-icon-search">筛选</el-button>
            </div>
          </div>
          <el-table
            :data="scheduleTableData.slice((scheduleCurrentPage-1)*schedulePageSize,scheduleCurrentPage*schedulePageSize)"
            border
            style="width: 100%;"
          >
            <el-table-column prop="data" label="日期" align="center" />
            <el-table-column prop="time" label="时间" align="center" />
            <el-table-column prop="course" label="课程" align="center" />
            <el-table-column prop="courseType" label="课程类型" align="center" />
            <el-table-column prop="address" label="上课地点" align="center" />
            <el-table-column prop="teacher" label="老师" align="center" />
            <el-table-column prop="signInStatus" label="签到状态" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text">--</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin:20px 0;">
            <el-pagination
              :current-page="scheduleCurrentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="schedulePageSize"
              :total="scheduleTableData.length"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="scheduleCurrentChange"
              @size-change="scheduleSizeChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 编辑弹框 -->
    <el-dialog :visible.sync="userInfoDialog" title="编辑学员" width="650px">
      <el-form ref="userInfoForm" :model="userInfoForm" :rules="userInfoRules" label-width="150px">
        <el-form-item label="学员姓名" prop="name">
          <el-input v-model="userInfoForm.name" style="width:300px;" />
        </el-form-item>
        <el-form-item label="手机号" prop="contact">
          <el-input v-model="userInfoForm.contact" style="width:300px;" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="userInfoForm.birthday"
            type="date"
            placeholder="选择日期"
            style="width:300px;"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userInfoForm.sex">
            <el-radio label="man">男</el-radio>
            <el-radio label="woman">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="userInfoForm.grade" style="width:300px;" />
        </el-form-item>
        <el-form-item label="地域">
          <el-cascader
            v-model="userInfoForm.territory"
            :options="territoryOptions"
            style="width:300px;"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="userInfoForm.address" style="width:300px;" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="userInfoForm.wechat" style="width:300px;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userInfoCancel">取 消</el-button>
        <el-button type="primary" @click="userInfoConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      activeName: 'first',
      userInfoDialog: false,
      // 默认显示用户信息数据
      userInfo: {
        name: '刘德华',
        birthday: '2000-06-03',
        sex: 'man',
        age: '19',
        wechat: '131311313',
        territory: ['北京市', '市辖区', '海淀区'],
        address: '知春路',
        studentNum: 'S2019080515',
        client: '',
        grade: '高三',
        contact: '15811583698'
      },
      // 编辑弹框绑定表单数据
      userInfoForm: {
        name: '刘德华',
        birthday: '2000-06-03',
        sex: 'man',
        age: '19',
        wechat: '131311313',
        territory: ['北京市', '市辖区', '海淀区'],
        address: '知春路',
        studentNum: 'S2019080515',
        client: '',
        grade: '高三',
        contact: '15811583698'
      },
      territoryOptions: [
        {
          value: '北京',
          label: '北京',
          children: [{
            value: '市辖区',
            label: '市辖区',
            children: [{
              value: '海淀区',
              label: '海淀区'
            }, {
              value: '朝阳区',
              label: '朝阳区'
            }, {
              value: '东城区',
              label: '东城区'
            }, {
              value: '西城区',
              label: '西城区'
            }]
          }
          ]
        }
      ],
      userInfoRules: {
        name: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入手机号', trigger: 'blur' }]

      },
      courseTableData: [
        {
          course: '语文作文提高',
          status: '已开始',
          validity: '2019-09-06',
          hour: '1/10',
          class: '语文提高班'

        }
      ],
      currentPage: 1,
      pageSize: 5,
      keyTime: '',
      keyCourse: '',
      scheduleCurrentPage: 1,
      schedulePageSize: 5,
      scheduleTableData: [
        {
          data: '2019-06-06',
          time: '13:00',
          course: '语文作文',
          courseType: '面授',
          address: '云尚校区',
          teacher: '刘华',
          signInStatus: '未签到'
        }
      ]
    }
  },
  mounted() {
    this.studentId = this.$route.params.studentNum
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    scheduleCurrentChange(val) {
      this.scheduleCurrentPage = val
    },
    scheduleSizeChange(val) {
      this.schedulePageSize = val
    },
    showUserEdit(id) {
      this.userInfoDialog = true
    },
    userInfoCancel() {
      this.userInfoDialog = false
      this.$refs.userInfoForm.resetFields()
    },
    userInfoConfirm() {
      this.userInfoDialog = false
      this.userInfo = this.userInfoForm
    },
    goAppoint() {
      this.$router.push({ name: 'Appointment' })
    }
  }
}
</script>

<style lang="scss" scoped>
.studentInfo {
  padding: 20px;
  display: flex;
  .left-box {
    border-right: 1px solid #eee;
    width: 256px;
    flex-shrink: 0;
    .user-top {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #eee;
      .user-contact {
        color: #767676;
        font-size: 12px;
        margin-top: 16px;
      }
    }
    .user-content {
      padding: 20px;
      color: #767676;
      font-size: 12px;
      .user-content-item {
        margin-bottom: 12px;
      }
      .user-btn {
        text-align: center;
      }
    }
  }
  .right-box {
    flex-grow: 1;
    padding: 0 20px;
    .search-box {
      display: flex;
      margin: 20px 0;
      .search-item {
        margin-right: 20px;
      }
    }
  }
}
</style>
